<template>
  <mu-popup-editor
    :value="selectText"
    :title="selectText"
    :editable="false"
    :clearable="true"
    :placeholder="placeholder"
    :popup-width="popupWidth"
    popup-render-to-body
    @clear="clear"
    @click.native="clickEditor">
    <mu-v-box class="box-1">
      <mu-bar class="mu-absolute-fit box-2" bordered-bottom>
        <mu-editor
          v-model="searchValue"
          :placeholder="searchPlaceholder"
          style="width:100%;"
          icon="search" />
      </mu-bar>
      <div class="mu-absolute-fit" style="overflow:auto;">
        <mu-v-box v-show="options.length" style="padding-top:48px;">
          <cmp-option
            v-for="(item,index) in optionList"
            :key="index"
            :active="item.active"
            :title="item.label"
            :label="item.label"
            :value="item.value"
            hide-bg
            style="height:40px;"
            @click.native="selectItem(item)" />
        </mu-v-box>
        <div v-show="!options.length" class="h-100 flex-center empty-text">
          暂无数据
        </div>
      </div>
    </mu-v-box>
  </mu-popup-editor>
</template>

<script>
  export default {
    name: 'PopupEditor',

    model: {
      prop: 'selectedList',
      event: 'change'
    },

    props: {
      placeholder: {
        type: String,
        default: '请选择'
      },
      searchPlaceholder: {
        type: String,
        default: '请输入关键字搜索'
      },
      popupWidth: {
        type: String,
        default: ''
      },
      selectedList: {
        type: Array,
        default: () => []
      },
      options: {
        type: Array,
        default: () => []
      }
    },

    data () {
      return {
        searchValue: ''
      }
    },

    computed: {
      selectText () {
        return this.selectedList.map(v => v.label).join(',')
      },

      optionList () {
        return this.options.filter(z => (z.label || '').includes((this.searchValue || '').trim()))
      }
    },

    watch: {
      selectedList (val) {
        this.options.forEach(v => {
          const findIndex = (val || []).findIndex(k => k.value === v.value)
          v.active = findIndex > -1
        })
      }
    },

    methods: {

      selectItem (item) {
        const list = this.selectedList
        const idx = list.findIndex(v => v.value === item.value)
        const option = this.options.find(v => v.value === item.value)
        option.active = !option.active
        if (idx !== -1) {
          list.splice(idx, 1)
        } else {
          list.push(item)
        }
        this.$emit('change', list)
      },

      clickEditor () {
        this.searchValue = ''
      },

      clear () {
        this.$emit('change', [])
        this.options.forEach(v => (v.active = false))
      }
    }
  }
</script>

<style scoped>

  .box-1 {
    height: 280px;
    position: relative;
    overflow: hidden;
  }

  .box-2 {
    bottom: auto;
    padding: 4px 8px 8px 8px;
    background: #fff;
    z-index: 99;
  }

  .empty-text {
    text-align: center;
    color: #777777;
    padding: 8px;
  }
</style>
